<template>
  <div class>
    <naviHeader></naviHeader>

    <div>
      <div class="header">
        <div class="balance">
          <div>
            <div class="text">账户余额（元）</div>
            <div class="text">{{incomeNumber}}</div>
          </div>
        </div>

        <div class="income-container">
          <div class="item border-right">
            <div class="text666">累计总收入</div>
            <div>{{todayIncome }}</div>
          </div>
          <div class="item border-right">
            <div class="text666">今日收入</div>
            <div>{{totalIncome}}</div>
          </div>
          <div class="item">
            <div class="text666">本周收入</div>
            <div>{{weekIncome}}</div>
          </div>
        </div>
      </div>

      <div class="column-item">
        <router-link to="/drawcash">
          <div class="item">
            <div>提现到微信钱包</div>
            <img class="arrow-right" src="../../images/icon/arrow.png">
          </div>
        </router-link>
        <!-- <div class="item">
          <div>修改支付密码</div>
          <img class="arrow-right" src="../../images/icon/arrow.png">
        </div> -->
      </div>

      <div class="column-item">
        <router-link to="/incomeList">
          <div class="item">
            <div>收入明细</div>
            <img class="arrow-right" src="../../images/icon/arrow.png">
          </div>
        </router-link>

        <div class="item">
          <div>已提现</div>
          <img class="arrow-right" src="../../images/icon/arrow.png">
        </div>

        <router-link to="/expendList">
          <div class="item">
            <div>消费记录</div>
            <img class="arrow-right" src="../../images/icon/arrow.png">
          </div>
        </router-link>

      </div>
    </div>
  </div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import { incomeRecord, getBillRecord } from "../../service/getData";

export default {
  data() {
    return {
      incomeNumber: this.$store.userInfo.incomeNumber || '0.00',
      todayIncome: "00.00",
      totalIncome: "00.00",
      weekIncome: "00.00"
    };
  },

  mounted() {
    // console.log(title, descriptions);
    this.init();
  },
  components: {
    naviHeader
  },
  methods: {
    init: function() {
      incomeRecord(this.$store.userToken).then(res => {
        this.todayIncome = res.todayIncome || '0.00';
        this.totalIncome = res.todayIncome || '0.00';
        this.weekIncome = res.todayIncome || '0.00';
      });
      getBillRecord(this.$store.userToken).then(res => {
        this.$store.billData = res;
      })
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.header {
  .balance {
    @include sc(0.4rem, #fff);
    @include fj(flex-start);
    align-items: center;
    background: rgb(255, 113, 0);
    height: 2rem;
    padding-left: 0.2rem;
    .text {
      color: #fff;
      margin-top: 0.1rem;
    }
  }

  .income-container {
    @include fj(space-around);
    align-items: center;
    margin-bottom: 0.2rem;
    height: 1.2rem;
    background: #fff;

    .item {
      width: 33%;
      text-align: center;
    }

    .border-right {
      border-right: 2px solid #f1f1f1;
    }

    .text666 {
      color: #888;
    }
  }
}

.column-item {
  margin-top: 0.2rem;

  .item {
    @include fj(space-between);
    align-items: center;
    height: 1rem;
    line-height: 1rem;
    background: #fff;
    border-bottom: 2px solid #f1f1f1;
    padding: 0 0.2rem;
  }
}

.arrow-right {
  transform: rotate(270deg);
  height: 0.4rem;
  width: 0.4rem;
}
</style>
